
  
 <!-- <figure>
  <h2>{{this.$route.query.title}}</h2>
    <video src="" width="1200" height="600" controls>
      <source :src="'http://192.168.137.1:8889'+'/'+this.$route.query.title+'.mp4'" type="video/mp4">
    </video>
   

  
   
 </figure> -->
<template>
<div class="demo-video">

   <div>
            <userNav></userNav>
         </div>
  <video id="myVideo"  controls preload="auto"   class="video" :poster="'http://localhost:8889'+'/'+this.$route.query.imgSrc+'.jpg'">
    <source :src="'http://localhost:8889'+'/'+this.$route.query.videoSrc+'.mp4'" type="video/mp4" >
  </video>
  <div class="rate">
    <h4>用户评分</h4>
    <el-rate
  v-model="value"
  show-text @change="change">
</el-rate>
  </div>
  <div class="comment">
   <Comment :MyTitle="this.$route.query.title"></Comment>
  </div>
</div>   

</template>

<script>
import Comment from "./comment.vue" 
import userNav from "../views/userNav.vue"
export default{

  data(){
   return {
    value:null,
    movieId:null
   }
  },
    components:{
       Comment,
       userNav 
       
    } ,
    beforeCreate(){
        //  console.log(this.$route.query.title)
    

        localStorage.setItem("MyTitle",this.$route.query.title)
          this.$axios({
               method:"get",
               url:this.$host+"/getM",
               params:{
                   title:this.$route.query.title
               }
              
          }).then(resp=>{
              this.movieId=resp.data[0].id
              localStorage.setItem("movieId",resp.data[0].id) 
          })
         
    },
    created(){
      // console.log(this.movieId)
      // this.$axios({
      //          method:"get",
      //          url:this.$host+"/getRate",
      //          params:{
      //           movieId:localStorage.getItem("movieId"),
      //           userId:JSON.parse(localStorage.getItem("user"))[0].id,  
               
      //          } 
              
      //     }).then(resp=>{
      //         this.value=resp.data[0].rateValue
             
      //     })     
        this.getRate()
    },
    methods:{
      getRate(){
        this.$axios({
               method:"get",
               url:this.$host+"/getRate",
               params:{
                movieId:localStorage.getItem("movieId"),
                userId:JSON.parse(localStorage.getItem("user"))[0].id,  
               
               } 
              
          }).then(resp=>{
              this.value=resp.data[0].rateValue
             
          })
           
      }
      ,
        change(){
            // console.log(typeof this.value) 
            // console.log(this.movieId)
            // console.log(JSON.parse(localStorage.getItem("user"))[0].id)
            this.$axios({
               method:"get",
               url:this.$host+"/addRate",
               params:{
                movieId:this.movieId,
                userId:JSON.parse(localStorage.getItem("user"))[0].id,  
                rateValue:this.value 
               } 
               
            }).then(resp=>{
                // console.log("hh")
                this.getRate()
            })
        }
         
    }
  
}

</script>

<style scoped>
h4{
    color: blue;
    margin-bottom: 10px;
    margin-left: 2px;
}
.rate{
    margin-top: 150px;
    margin-left: 50px;
}

.comment{
    margin-top: 100px;
}
.video{
   width: 1200px;
   height: 500px;
  margin-left: 150px;
  margin-top: 100px;

}

</style>